<template>
  <div class="nav-bar">
    <van-nav-bar>
      <template #left>
        <img class="img" src="@/assets/zhuke_logo@2x.png" alt="" />
      </template>
      <template #right>
        <van-icon class="icon" name="search" size="30" />
      </template>
      <template #title>
        <van-tabs
          title-active-color="#0085ff"
          color="#0085ff"
          line-width="30px"
          animated
          v-model="active"
        >
          <van-tab title="头条" to="/home/find" :name="0"> </van-tab>
          <van-tab title="圈子" to="/home/find/community" :name="1"></van-tab>
          <van-tab title="视频" to="/home/find/highlight" :name="2"></van-tab>
        </van-tabs>
      </template>
    </van-nav-bar>
  </div>
</template>

<script>
export default {
  data () {
    return {
      active: 0,
      list: ''
      // show: ture
    }
  },
  created () {
    // 利用生命钩子mounted监听,一进来即让tab栏active索引变为0 然后路由跳转的界面是相对应的界面
    this.active = 0
    this.$router.push('/home/find/find')
  }
}
</script>

<style lang="less">
.nav-bar {
  .img {
    width: 68px;
    height: 24px;
  }
  .icon {
    color: #505050;
    font-weight: 600;
  }
}
</style>
